<template>
    <div id="login" class="login">
        <el-row>
            <el-col :span="6">
                <div class="grid-content-login">
                    <el-form
                            label-position="left"
                            :model="ruleForm"
                            :rules="rules"
                            ref="ruleForm"
                            label-width="0px"
                            class="demo-ruleForm login-container"
                    >
                        <p class="title">欢迎登录</p>
                        <el-form-item prop="username">
                            <el-input
                                    type="text"
                                    v-model="ruleForm.username"
                                    auto-complete="off"
                                    placeholder="账号"
                            ></el-input>
                        </el-form-item>
                        <el-form-item prop="password">
                            <el-input
                                    type="password"
                                    v-model="ruleForm.password"
                                    auto-complete="off"
                                    placeholder="密码"
                            ></el-input>
                        </el-form-item>
                        <el-form-item style="width:100%;">
                            <el-button
                                    type="primary"
                                    style="width:100%;"
                                    @click="login('ruleForm')"
                                    :loading="logining"
                            >登录</el-button
                            >
                        </el-form-item>
                    </el-form>
                </div>
            </el-col>
            <el-col :span="18"><div class="grid-content-img"></div></el-col>
        </el-row>
    </div>
</template>

<script>
    import axios from 'axios'
    export default {
        name: "login",
        data() {
            return {
                //定义loading默认为false
                logining: false,
                ruleForm: {
                    username: "",
                    password: "",
                    code: ""
                },
                rules: {
                    username: [{ required: true, message: "请输入账号", trigger: "blur" }],
                    password: [{ required: true, message: "请输入密码", trigger: "blur" }],
                    code: [{ required: true, message: "请输入验证码", trigger: "blur" }]
                }
            };
        },
        mounted(){
        },
        methods: {
            //获取info列表
            login(formName){
                this.$refs[formName].validate(valid => {
                    if (valid) {
                        let params = {
                            name: this.ruleForm.username,
                            password: this.ruleForm.password,
                        }
                        this.logining = true;
                        this.logining = false;
                        sessionStorage.setItem("user", params.name);
                        this.$router.push({path: "/main"})
                        /* axios.post("/api/users/login", params).then(res => {
                             if (res.data.flag) {
                                 this.logining = false;
                                 sessionStorage.setItem("user", params.name);
                                 this.$router.push({path: "/map1"});
                             }
                         });*/
                    }
                })
            },
        }
    };
</script>

<style lang="scss" scoped>
    .login {
        position: relative;
        width: 100%;
        height: 100%;
        background: #fff;
        .grid-content-login {
            position: relative;
            top: 100px;
            width: 100%;
            height: 300px;
            padding: 30px;
            font-size: 14px;
            color: rgba(152, 164, 181, 1);
            line-height: 19px;
            .title {
            }
        }
        .grid-content-img {
            width: 100%;
            height: 100vh;
            background-image: url("../../assets/images/login-bg.png");
            background-size: 100% 100%;
            background-repeat: no-repeat;
        }
    }
</style>
